<% content_for :heading do %>
  <%= t(".title") %>
<% end %>

<% content_for :description do %>
   <%= t(".dialogs_description_html") %>
<% end %>

<% content_for :toc do %>
  <a href="#example"><%= t("decidim.design.helpers.demo") %></a>
  <a href="#usage"><%= t("decidim.design.helpers.usage") %></a>
  <a href="#html"><%= t("decidim.design.helpers.html_tips") %></a>
<% end %>

<section id="demo" class="design__section">
  <h2><%= t("decidim.design.helpers.demo") %></h2>

  <p><%= t(".dialog_demo_description_html") %></p>

  <button data-dialog-open="example" class="button button__lg button__secondary">
    Show modal
  </button>

  <%= decidim_modal id: "example" do %>
   I am a modal
  <% end %>
</section>

<section id="usage" class="design__section">
  <h2><%= t("decidim.design.helpers.usage") %></h2>

  <p><%= t(".usage_description") %></p>

  <p><%= t(".usage_description_html") %></p>

  <p><%= t(".usage_description_2_html") %></p>

  <div class="design__section-snippet" style="margin-top: inherit;">
    <p><%= t("decidim.design.home.index.github_source") %>: <%= link_to("decidim-core/app/packs/src/decidim/a11y.js", "https://github.com/decidim/decidim/blob/develop/decidim-core/app/packs/src/decidim/a11y.js", target: "_blank", rel: "noopener noreferrer") %></p>

    <code>
      <textarea spellcheck="false" rows="7">
&lt;button data-dialog-open=&quot;example&quot; class=&quot;button button__lg button__secondary&quot;&gt;
  Show modal
&lt;/button&gt;

&#60;%= decidim_modal id: "example" do %&#62;
  I am a modal
&#60;% end %&#62;
      </textarea>
    </code>
  </div>
</section>

<section id="html" class="design__section">
  <h2><%= t("decidim.design.helpers.html_tips") %></h2>

  <p><%= t(".tips_description") %></p>

  <p><%= t(".tips_description_html") %></p>

  <div class="design__section-snippet" style="margin-top: inherit;">
    <code>
      <textarea spellcheck="false" rows="20">
&#60;%= decidim_modal id: "example" do %&#62;
  <div data-dialog-container>
    &#60;%= icon "icon_identifier" %&#62; // ... pick a desired icon
    <h3 id="dialog-title-example" tabindex="-1" data-dialog-title>
      Modal title
    </h3>
    <div>
      <p id="dialog-desc-example">
         Modal description (optional)
      </p>

      // ... add more HTML
    </div>
  </div>
  <div data-dialog-actions>
    <button data-dialog-close="example">
       Close modal
    </button>
    // ... add more buttons
  </div>
&#60;% end %&#62;
      </textarea>
    </code>
  </div>
</section>
